<template>
  <el-drawer
    :title="copName"
    size="60%"
    :visible.sync="isShowDrawer"
    @close="closeDrawer"
  >
    <div>
      <el-form ref="form" class="doumee-form" :model="param" label-width="140px" label-suffix="：" :rules="rules">
        <div class="property-title">套餐属性</div>
        <el-form-item label="套餐名称" prop="name">
          <el-input v-model="param.name" class="w400" maxlength="30" placeholder="请输入套餐名称" />
        </el-form-item>
        <el-form-item label="类型" class="select-style" prop="mealsType">
          <el-select v-model="param.mealsType" :disabled="id != ''" class="w400" placeholder="次数卡" @change="changeType">
            <el-option v-for="item in mealsTypes" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <template v-if="param.mealsType == '1'">
          <el-form-item label="每日出入限制">
            <el-radio v-model="limitNumFlag" label="0" @change="changeinOutNum">不限制</el-radio>
            <el-radio v-model="limitNumFlag" label="1" @change="changeinOutNum">限制次数</el-radio>
            <el-input v-if="limitNumFlag === '1'" v-model="param.inOutNum" :maxlength="5" class="w100" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" />
            <span v-if="limitNumFlag === '1'" class="mll0"> 次</span>
          </el-form-item>
        </template>
        <template v-if="param.mealsType == '4'">
          <el-form-item label="每日约课限制">
            <el-radio v-model="limitNumFlag" label="0" @change="changeinOutNum">不限制</el-radio>
            <el-radio v-model="limitNumFlag" label="1" @change="changeinOutNum">限制次数</el-radio>
            <el-input v-if="limitNumFlag === '1'" v-model="param.inOutNum" :maxlength="5" class="w100" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" />
            <span v-if="limitNumFlag === '1'" class="mll0"> 次</span>
          </el-form-item>
        </template>
        <div v-if="param.mealsType == '0' || param.mealsType == '2' || param.mealsType == '3'">
          <el-form-item label="套餐次数" prop="nums">
            <el-input
              v-model="param.nums"
              maxlength="4"
              class="w400"
              oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
              placeholder="请输入次数"
            />
          </el-form-item>
        </div>
        <div v-if="param.mealsType == '0' || param.mealsType == '2' || param.mealsType == '3'">
          <el-form-item label="赠送次数" prop="giveNums">
            <el-input
              v-model="param.giveNums"
              class="w400"
              maxlength="10"
              oninput="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
              placeholder="请输入赠送次数"
            />
          </el-form-item>
        </div>
        <!-- <div>
          <el-form-item label="有效期(天)" prop="indate">
            <el-input
              v-model="param.indate"
              class="w400"
              maxlength="4"
              oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
              placeholder="请输入有效期"
            />
          </el-form-item>
        </div> -->
        <el-form-item label="价格(元)" prop="price">
          <el-input
            v-model="param.price"
            class="w400"
            maxlength="10"
            onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            oninput="if(value<0) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
            placeholder="请输入价格"
          />
        </el-form-item>
        <el-form-item label="销售渠道" prop="channel">
          <el-checkbox-group v-model="param.channel">
            <el-checkbox v-for="(item, index) in channels" :key="index" :label="item.value" :value="item.value">{{
              item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="套餐图片">
          <transition name="fade">
            <Cropper
              v-if="dialogCropperVisible"
              :option-img="optionImg"
              :fileinfo="fileinfo"
              use-type="MEALS_IMG"
              :fixed-number="[690, 388]"
              @formSubmit="cropperSubmit"
              @formClose="cropperClose"
            />
          </transition>
          <div class="df_ac">
            <el-upload
              class="device-uploader"
              :action="uploadFileUrl"
              :data="uploadParam"
              :auto-upload="false"
              :show-file-list="false"
              accept=".jpg,.png"
              :on-change="addFileChange"
            >
              <i class="el-icon-plus uploader-icon" />
              <div v-show="param.showUrl" class="file" :style="'background-image: url(' + param.showUrl + ')'">
                <div class="delete">
                  <i class="el-icon-delete icon" @click.stop="deleteDeviceConfigAddImage" />
                </div>
              </div>
              <!-- <i class="el-icon-plus" /> -->
            </el-upload>
            <div class="placeholder9">
              <div class="line24">上传图片不允许涉及政治敏感与色情;</div>
              <div class="line24">图片格式必须为：png,PNG,jpeg,jpg,JPG；不可大于2M；建议使用</div>
              <div class="line24">png格式图片，以保持最佳效果；建议图片尺寸为690px X 388px</div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="描述">
          <el-input v-model="param.content" :autosize="{ minRows: 3}" class="w400" maxlength="200" type="textarea" placeholder="请输入" />
        </el-form-item>

        <div class="mb20">
          <span class="property-title">时间设置</span>
          <span class="sub-title">销售时间、使用时间设置</span>
        </div>
        <el-form-item label="销售时段" prop="timeSale">
          <el-date-picker
            v-model="param.timeSale"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <div class="df">
          <el-form-item label="使用时间" class="select-style" prop="validityType">
            <el-select
              v-model="param.validityType"
              class="w200 mr20"
              placeholder="请选择使用时间"
            >
              <el-option label="固定日期" value="0" />
              <el-option label="购买后生效" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="param.validityType === '0'" label-width="0" prop="validityTime">
            <span>固定时间：</span>
            <el-date-picker
              v-model="param.validityTime"
              type="daterange"
              class="w400"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            />
          </el-form-item>
          <el-form-item v-if="param.validityType === '1'" label-width="0" prop="indate">
            <span>有效期：</span>
            <el-input
              v-model="param.indate"
              class="w200 mr10"
              onkeyup="value=value.replace(/[^\d^]/g,'')"
              oninput="if(value<=0) { value = ''}"
              placeholder="请输入日期"
            />
            <span>天</span>
          </el-form-item>
        </div>
        <el-form-item label="时间段限制" prop="timer">
          <el-radio v-model="param.rulesTimeSectionFlag" label="1" @change="changeTimes">全时段可用</el-radio>
          <el-radio v-model="param.rulesTimeSectionFlag" label="0" @change="changeTimes">指定时段可用</el-radio>
          <div v-if="param.rulesTimeSectionFlag == '0'">
            <el-checkbox-group v-model="selWeekList" class="mb10">
              <el-checkbox v-for="item in weekList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
            <div class="df">
              <span class="mr10">每日</span>
              <div>
                <el-time-picker
                  v-model="param.useTime"
                  is-range
                  class="w200 mr10"
                  format="HH:mm"
                  value-format="HH:mm"
                  range-separator="~"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                />
              </div>
              <span>可用</span>
            </div>
          </div>
        </el-form-item>

        <div class="property-title">会员折扣</div>
        <el-form-item label="折扣类型" class="select-style">
          <div class="df_ac">
            <el-select v-model="param.discountType" placeholder="选择折扣类型" class="w400">
              <el-option v-for="item in discountTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <span v-if="param.discountType && param.discountType == '1'" class="placeholder9 ml10">0<折扣<10，支持1位小数</span>
          </div>
        </el-form-item>
        <el-form-item v-if="param.discountType === '1'" label-width="0" class="select-style">
          <el-form-item
            v-for="(item, index) in param.vipTypes"
            :key="index"
            :label="item.name"
            :prop="`vipTypes[${index}].value`"
            :rules="{ required: true, message: '请输入折扣', trigger: 'blur' }"
            class="count-style"
          >
            <el-input
              v-model="item.value"
              class="input-style"
              maxlength="3"
              onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{1,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
              oninput="if(value<0||value>10) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{1,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
              placeholder="请输入折扣"
            />
          </el-form-item>
        </el-form-item>

        <div class="property-title">适用规则</div>
        <el-form-item label="总发放数量" prop="circulationAll">
          <el-input
            v-model="param.circulationAll"
            class="w200 mr10"
            maxlength="10"
            oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            placeholder="请输入总行数量"
          />
          <span class="placeholder9 ml10"> 请输入总发放数量，总销量大于该数量后，不再支持销售；为空表示不限制</span>
        </el-form-item>
        <el-form-item label="日发放数量" prop="circulationDay">
          <el-input
            v-model="param.circulationDay"
            class="w200 mr10"
            maxlength="10"
            oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            placeholder="请输入发行数量"
          />
          <span class="placeholder9 ml10"> 请输入日发放数量，当日销量大于该数量后，不再支持销售</span>
        </el-form-item>
        <el-form-item label="适用场馆">
          <el-radio v-model="param.rulesVenueFlag" label="1" @change="changeVenue">全部场馆可用</el-radio>
          <el-radio v-model="param.rulesVenueFlag" label="0" @change="changeVenue">指定场馆可用</el-radio>
          <div v-if="param.rulesVenueFlag == '0'">
            <div class="venue-list">
              <el-checkbox-group v-model="param.checkedVenue" @change="checkVenue">
                <el-checkbox v-for="(item, index) in venueProjectListData" :key="index" :label="item.id">{{ item.name
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="param.rulesVenueFlag === '0' && param.mealsType != '3' && param.mealsType != '4'" label="适用项目">
          <el-radio v-model="param.rulesProjectFlag" label="1" @change="changeItems">全部项目可用</el-radio>
          <el-radio v-model="param.rulesProjectFlag" label="0" @change="changeItems">指定项目可用</el-radio>
          <el-table v-if="param.rulesProjectFlag == '0'" :data="venueProjectListDataForTable" border>
            <el-table-column prop="name" label="场馆" width="200px" />
            <el-table-column label="项目">
              <template slot-scope="scope">
                <el-checkbox-group v-model="checkedItems">
                  <el-checkbox
                    v-for="(item, index) in scope.row.projects"
                    :key="index"
                    :label="item.id"
                    @change="checkProject()"
                  >{{ item.projectName }}</el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item v-if="param.mealsType === '3' || param.mealsType === '4'" label="可约课程限制">
          <el-radio v-model="param.rulesCourseFlag" label="1" @change="changeItems">全部课程</el-radio>
          <el-radio v-model="param.rulesCourseFlag" label="0" @change="changeItems">指定课程</el-radio>
          <div v-if="param.rulesCourseFlag == '0'">
            <div class="venue-list">
              <el-checkbox-group v-model="checkedCourse">
                <el-checkbox v-for="(item) in courseList" :key="item.courseId" :label="item.courseId">{{ item.courseName
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="param.mealsType === '3' || param.mealsType === '4'" label="可约教练限制">
          <el-radio v-model="param.rulesTeacherFlag" label="1" @change="changeItems">全部教练</el-radio>
          <el-radio v-model="param.rulesTeacherFlag" label="0" @change="changeItems">指定教练</el-radio>
          <div v-if="param.rulesTeacherFlag == '0'">
            <div class="venue-list">
              <el-checkbox-group v-model="checkedTeacher">
                <el-checkbox v-for="(item) in teacherLevels" :key="item.id" :label="item.id">{{ item.name
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-form-item>
        <div class="separate" />
        <el-button
          v-preventReClick
          type="primary"
          :loading="submitLoading"
          @click="formOnSubmit('form')"
        >提交</el-button>
        <el-button @click="closeDrawer">取消</el-button>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import {
  editOrAddMeal,
  venueProjectList,
  mealInfo,
  uploadFile,
  cardList,
  teacherLevelPost,
  courseListPost
} from '@/api'
import { rules, mealsTypes, weekList } from './config'
import { pickerOptionsS } from '@/utils/config'
import Cropper from '@/components/cropper'
export default {
  name: 'ComboAdd',
  components: {
    Cropper
  },
  data() {
    return {
      weekList,
      id: '',
      isShowDrawer: false,
      submitLoading: false,
      optionImg: '',
      fileinfo: {},
      dialogCropperVisible: false,
      pickerOptions: pickerOptionsS,
      discountTypeList: [
        {
          value: '0',
          label: '默认折扣'
        },
        {
          value: '1',
          label: '自定义折扣'
        }
      ],
      channels: [
        { value: '1', name: '小程序' },
        { value: '2', name: '场馆端' }
      ],
      copName: '新增套餐',
      imageList: [],
      uploadFileUrl: uploadFile,
      uploadParam: {
        folder: 'MEALS_IMG'
      },
      limitNumFlag: '0',
      filters: {},
      mealsTypes,
      selWeekList: [],
      venueProjectListData: [],
      venueProjectListDataForTable: [],
      projectCheckList: [],
      checkedItems: [],
      checkedCourse: [],
      checkedTeacher: [],
      param: {
        rulesVenueFlag: '1',
        rulesProjectFlag: '1',
        rulesTimeSectionFlag: '1',
        rulesTeacherFlag: '1',
        rulesCourseFlag: '1',
        inOutNum: -1,
        validityType: '0',

        nums: '',
        giveNums: '',
        indate: '',
        circulationDay: '', // 发行数量
        name: '', // 套餐名称
        mealsType: '0', // 套餐类型（0次数卡1期限卡
        content: '', // 描述
        imgurl: '',
        showUrl: '',
        insertUrl: '',
        price: '',
        discountType: '0',
        discountMap: {},
        saleDateStart: '',
        saleDateEnd: '',
        timeSale: [],
        checkedVenue: [],
        vipTypes: [],
        channel: ['2'],
        mealsRules: {
          // 使用规则
          useStadiums: '', // 适用场馆
          useItems: '' // 适用项目
        }
      },
      rules,
      teacherLevels: [],
      courseList: []
    }
  },
  created() {
    this.getVenueProjectList()
    this.getCardList()
  },
  methods: {
    onSubmit() {
      const that = this
      const param = { ...this.param }
      if (param.circulationAll && param.circulationAll !== '0') {
        if (param.circulationAll * 1 < param.circulationDay * 1) {
          return this.$message.warning('总发放数量需大于日发放数量')
        }
      }
      if (this.selWeekList.length) {
        param.mealsRules.useDays = this.selWeekList.join(',')
      }
      param.saleDateStart = this.param.timeSale[0]
      param.saleDateEnd = this.param.timeSale[1]
      if (this.param.validityType === '0') {
        param.validityStartTime = this.param.validityTime[0]
        param.validityEndTime = this.param.validityTime[1]
        if (new Date(param.saleDateEnd).getTime() >= new Date(param.validityEndTime + ' 23:59:59').getTime()) {
          this.param.validityTime = null
          return this.$message.warning('销售时间不可设置在使用时间之后')
        }
      } else {
        param.indate = parseInt(this.param.indate)
      }
      if (param.useTime) {
        param.mealsRules.useTimeStart = param.useTime[0]
        param.mealsRules.useTimeEnd = param.useTime[1]
      }
      if (param.circulationAll === '') {
        param.circulationAll = -1
      }
      if (param.discountType === '1') {
        const discounts = {}
        for (const dc of param.vipTypes) {
          discounts[dc.id] = dc.value * 0.1.toFixed(1)
        }
        param.discountMap = discounts
      }

      if (param.inOutNum) {
        param.inOutNum = param.inOutNum * 1
      }
      if (param.checkedVenue.length) {
        param.mealsRules.useStadiums = param.checkedVenue.join(',')
      }
      if (this.checkedItems.length) {
        param.mealsRules.useItems = this.checkedItems.join(',')
      }
      param.channel = this.param.channel.length > 1 ? this.param.channel.join(',') : this.param.channel[0]
      param.id = this.id ? this.id : null
      if (this.checkedCourse.length > 0 && param.rulesCourseFlag === '0') {
        param.mealsRules.useCourse = this.checkedCourse.join(',')
      } else {
        param.mealsRules.useCourse = ''
      }
      if (this.checkedTeacher.length > 0 && param.rulesTeacherFlag === '0') {
        param.mealsRules.useTeacherLevel = this.checkedTeacher.join(',')
      } else {
        param.mealsRules.useTeacherLevel = ''
      }
      console.log(param)

      that.submitLoading = true
      editOrAddMeal({ param, userId: sessionStorage.getItem('userId') })
        .then((res) => {
          // console.log(res)
          that.submitLoading = false
          if (res.errorCode !== '000000') return
          if (res.errorCode === '000000') {
            if (this.id) {
              this.$message.success('编辑成功')
              this.isShowDrawer = false
              this.$emit('success')
            } else {
              this.$message.success('新增成功')
              this.isShowDrawer = false
              this.$emit('success')
            }
          }
        })
        .catch((er) => {
          that.submitLoading = false
          console.log(er)
        })
    },
    changeinOutNum(val) {
      if (val === '0') {
        this.$set(this.param, 'inOutNum', -1)
      } else {
        this.$set(this.param, 'inOutNum', 1)
      }
    },
    initCourseConfig() {
      teacherLevelPost({ param: {
        venueIds: this.param.checkedVenue || []
      }}).then(res => {
        this.teacherLevels = res.recordList || []
      })
      courseListPost({ param: {
        courseType: '4',
        payType: '01',
        venueIds: this.param.checkedVenue || []
      }}).then(res => {
        this.courseList = res.recordList || []
      })
    },
    changeTimes() {
      this.$set(this.param, 'useDays', null)
      this.$set(this.param, 'useTime', null)
      this.selWeekList = []
    },
    formOnSubmit(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.onSubmit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changeType(val) {
      if (val === '3' && val === '4') {
        this.initCourseConfig()
      }
    },
    changeVenue(val) {
      this.param.checkedVenue = []
      if (val === '0') {
        this.venueProjectListDataForTable = []
      } else {
        this.venueProjectListDataForTable = this.venueProjectListData
      }
      console.log(this.param.checkedVenue)
      this.changeItems()
    },
    changeItems() {
      this.checkedItems = []
      this.param.mealsRules.useItems = ''
    },
    closeDrawer() {
      this.isShowDrawer = false
      this.$emit('close')
    },
    getCardList() {
      // 获取卡类型列表
      cardList({
        pagination: {
          page: 1,
          rows: 1000,
          firstQueryTime: this.firstQueryTime
        },
        param: {
          cardName: null,
          isnormal: null,
          channel: null,
          type: '1'
        }
      }).then(res => {
        // console.log(res)
        if (res.errorCode === '000000') {
          console.log(res.recordList)
          // eslint-disable-next-line no-unused-vars
          for (const item of res.recordList) {
            this.param.vipTypes.push({ name: item.cardName, id: item.id, value: null })
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 上传成功
    uploadSuccess(response, file, fileList) {
      console.log(fileList[0].response.insertUrl)
      console.log(this.imageList)
      this.param.imgurl = fileList[0].response.insertUrl
      this.$refs.form.clearValidate()
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.param, 'showUrl', config.showUrl)
        this.$set(this.param, 'insertUrl', config.insertUrl)
        this.param.imgurl = config.insertUrl
        this.$refs.form.clearValidate()
        this.dialogCropperVisible = false
      } else {
        this.$message.error(config.msg || '上传失败')
        this.$refs.form.clearValidate()
        this.dialogCropperVisible = false
      }
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false
    },
    async addFileChange(file, fileList) {
      // 上传，拿到file文件
      // this.files = file.raw;
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    deleteDeviceConfigAddImage() {
      this.param.showUrl = ''
      this.param.insertUrl = ''
      this.param.imgurl = ''
    },
    // 获取场馆项目
    getVenueProjectList() {
      venueProjectList({}).then((res) => {
        if (res.errorCode !== '000000') return
        this.venueProjectListData = res.recordList
        this.venueProjectListDataForTable = res.recordList || []
      })
    },
    // 重置场馆项目选中状态
    resetVenueProject() {
      const { venueProjectListData, checkedVenue } = this
      const checedList = []
      if (checkedVenue.length === 0) {
        this.venueProjectListDataForTable = venueProjectListData
      } else {
        for (const i in venueProjectListData) {
          for (const j in checkedVenue) {
            if (venueProjectListData[i].id === checkedVenue[j]) {
              checedList.push(venueProjectListData[i])
            }
          }
        }
        this.venueProjectListDataForTable = checedList
      }
    },
    // 选择场馆
    checkVenue(e) {
      const { venueProjectListData, param } = this
      const checedList = []
      for (const i in venueProjectListData) {
        if (e.includes(venueProjectListData[i].id)) {
          checedList.push(venueProjectListData[i])
        }
      }
      this.venueProjectListDataForTable = checedList
      if (param.mealsType === '3' || param.mealsType === '4') {
        this.initCourseConfig()
        // this.checkedCourse = []
        // this.checkedTeacher = []
      }
    },
    // 选择项目
    checkProject(e) {
      console.log(e, this.checkedItems)
    },
    // 获取套餐详情
    getMealInfo(id) {
      Promise.all(
        [
          mealInfo({
            param: { id },
            userId: sessionStorage.getItem('userId')
          }),
          cardList({
            pagination: {
              page: 1,
              rows: 1000,
              firstQueryTime: this.firstQueryTime
            },
            param: {
              cardName: null,
              isnormal: null,
              channel: null,
              type: '1'
            }
          })
        ]
      )
        .then((res) => {
          const combo = res[0].record
          this.getVenueProjectList()
          this.imageList.push({
            url: combo.fullImgurl,
            response: {
              insertUrl: combo.imgurl,
              showUrl: combo.fullImgurl
            }
          })
          this.param.id = combo.id
          this.param.nums = combo.nums
          // this.param.circulationAll = combo.circulationAll
          this.$set(this.param, 'circulationAll', combo.circulationAll)
          this.$set(this.param, 'circulationDay', combo.circulationDay)
          if (combo.inOutNum) {
            this.param.inOutNum = combo.inOutNum
            this.limitNumFlag = '1'
          }
          this.param.rulesVenueFlag = combo.rulesVenueFlag
          this.param.rulesProjectFlag = combo.rulesProjectFlag

          this.param.giveNums = combo.giveNums
          this.param.name = combo.name
          this.param.indate = combo.indate
          this.param.mealsType = combo.mealsType
          this.param.content = combo.content
          this.param.imgurl = combo.imgurl
          this.param.price = combo.price
          this.param.insertUrl = combo.imgurl
          this.param.showUrl = combo.fullImgurl
          this.param.channel = combo.channel.split(',')
          this.param.discountType = combo.discountType
          this.param.saleDateStart = combo.saleDateStart
          this.param.saleDateEnd = combo.saleDateEnd
          if (combo.saleDateStart) {
            const timeSale = [combo.saleDateStart, combo.saleDateEnd]
            this.param.timeSale = timeSale
          }
          this.param.checkedVenue = combo.useStadiums || []
          this.checkedItems = combo.useItems || []
          this.param.vipTypes = []
          if (combo.validityStartTime && combo.validityEndTime) {
            this.$set(this.param, 'validityTime', [combo.validityStartTime, combo.validityEndTime])
          } else {
            this.$set(this.param, 'validityTime', [])
          }
          this.$set(this.param, 'rulesTimeSectionFlag', combo.rulesTimeSectionFlag)
          this.$set(this.param, 'validityType', combo.validityType)
          if (combo.useTimeStart || combo.useTimeEnd) {
            this.$set(this.param, 'useTime', [combo.useTimeStart, combo.useTimeEnd])
          }
          if (combo.useDays) {
            this.selWeekList = combo.useDays.includes(',')
              ? combo.useDays.split(',')
              : [combo.useDays]
          }
          if (combo.useCourse && combo.useCourse !== '') {
            this.checkedCourse = combo.useCourse.split(',')
            this.$set(this.param, 'rulesCourseFlag', '0')
          } else {
            this.$set(this.param, 'rulesCourseFlag', '1')
            this.checkedCourse = []
          }
          if (combo.useTeacherLevel && combo.useTeacherLevel !== '') {
            this.$set(this.param, 'rulesTeacherFlag', '0')
            this.checkedTeacher = combo.useTeacherLevel.split(',')
          } else {
            this.$set(this.param, 'rulesTeacherFlag', '1')
            this.checkedTeacher = []
          }
          if (combo.discountType === '1') {
            for (const item of res[1].recordList) {
              this.param.vipTypes.push({ name: item.cardName, id: item.id, value: combo.discount[item.id] * 10 })
            }
          } else {
            for (const item of res[1].recordList) {
              this.param.vipTypes.push({ name: item.cardName, id: item.id, value: null })
            }
          }
          console.log('param', this.param)
          this.initCourseConfig()
          this.resetVenueProject()
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleChange(value) {
      console.log('value')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.separate{
  width: 100%;
  height: 1px;
  margin: 20px 0px;
  background-color: #DFE2E8;
}
.tip {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;

  &:hover {
    border-color: $menuActive;

    .uploader-icon {
      color: $menuActive;
    }
  }

  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;

      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;

        .icon {
          color: #fff;
        }
      }

      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }

  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.count-style {
  display: inline-block;
  width: 45%;
  height: 60px;
}

.division-line {
  text-align: center;
  display: inline-block;
  color: #999;
  width: 50px;
}

.clock {
  display: inline-block;
}

.upload-style {
  vertical-align: middle;
  display: inline-block;
  // width: 60px;
  // height: 60px;
  border: none;
}

.img-style {
  margin: auto;
  background-color: #eee;
  width: 100px;
  height: 60px;
  vertical-align: middle;
}

.avatar {
  width: 60px;
  height: 60px;
  display: block;
}

.line-style {
  background-color: #dfe2e8;
  height: 1px;
  // width: 80%;
  // margin: 0 auto;
  margin-bottom: 20px;
}
</style>
